<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="/static/images/favicon.ico" />
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <title>网站初始化配置</title>
  <style>
    .config-btns {
      padding: 5px;
    }
    .config-items {
      padding: 30px 10px 15px;
    }
    .btn.disabled {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    #if(!lock)
    <div id="config">
      <h2 class="text-center" style="margin: 50px auto 60px;">网站初始化配置:)</h2>
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <div class="panel-title">网站安装向导</div>
          </div>
          <div class="panel-body">
            <div class="config-btns ">
              <div :class="'btn btn-default disabled ' + (step==1?'btn-primary':'')">1、网站配置</div>
              <div :class="'btn btn-default disabled ' + (step==2?'btn-primary':'')">2、数据库设置</div>
              <div :class="'btn btn-default disabled ' + (step==3?'btn-primary':'')">3、安装完成</div>
            </div> <!-- btns end -->
            <div class="config-items">
              <div id="alert" style="padding: 0 15px; display: none;">
                <div class="alert alert-warning" v-html="tipText"></div>
              </div>
              <div v-show="step == 1">
                <div class="form-group clearfix">
                  <label class="col-md-3 control-label">管理员帐号</label>
                  <div class="col-md-9">
                    <input class="form-control" v-model="config.username" placeholder="请输入管理员帐号" maxlength="100">
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-3 control-label">管理员密码</label>
                  <div class="col-md-9">
                    <input class="form-control" type="password" v-model="config.password" placeholder="请输入管理员密码" maxlength="100">
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-3 control-label">确认管理员密码</label>
                  <div class="col-md-9">
                    <input class="form-control" type="password" v-model="config.password2" placeholder="请再次输入管理员密码" maxlength="100">
                  </div>
                </div>
              </div> <!--step 1-->
              <div v-show="step == 2">
                <div class="form-group clearfix">
                  <label class="col-md-3 control-label">数据库类型</label>
                  <div class="col-md-9">
                    <select v-model="config.dbType" class="form-control">
                      <option value="sqlite">sqlite</option>
                      <option value="mysql">mysql</option>
                    </select>
                  </div>
                </div>
                <div v-show="config.dbType=='mysql'">
                  <div class="form-group clearfix">
                    <label class="col-md-3 control-label">数据库地址</label>
                    <div class="col-md-9">
                      <input class="form-control" v-model="config.dbUrl" placeholder="请输入数据库地址" maxlength="100">
                    </div>
                  </div>
                  <div class="form-group clearfix">
                    <label class="col-md-3 control-label">数据库帐号</label>
                    <div class="col-md-9">
                      <input class="form-control" v-model="config.dbName" placeholder="请输入数据库帐号" maxlength="100">
                    </div>
                  </div>
                  <div class="form-group clearfix">
                    <label class="col-md-3 control-label">数据库密码</label>
                    <div class="col-md-9">
                      <input class="form-control" v-model="config.dbPass" placeholder="请输入数据库密码" maxlength="100">
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="step == 3">
                <h3 class="text-center">安装完成！等待跳转...</h3>
              </div>
            </div> <!-- items end -->
            <div class="config-step text-right">
              <div class="btn btn-default btn-sm" @click="prevStep">上一步</div>
              <div class="btn btn-primary btn-sm" @click="nextStep">{{step<3?'下一步':'登录后台'}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    #else
    <div class="text-center">
      <h3>系统以安装，无须再次安装！</h3>
    </div>
    #end
  </div>

  <script>
    var vm = new Vue({
      el: "#config",
      data: {
        config: {
          username: "admin",
          password: "admin",
          password2: "admin",
          dbType: "sqlite",
          dbUrl: "localhost:3306",
          dbName: "root",
          dbPass: "root"
        },
        tip: false,
        tipText: "",
        step: 1,
        success: false
      },
      methods: {
        prevStep: function () {
          if (this.step > 1 && this.step !== 3) {
            this.step--;
          }
        },
        nextStep: function () {
          if (this.checkVal() && this.step < 3) {
            this.step++;
          }
          if (this.success && this.step === 3) {
            location.href = "/admin";
          }
        },
        checkVal: function () {
          if (this.step === 1) {
            if (this.config.username.length < 5) {
              this.tipText = "用户名不能少于5位";
            } else if (this.config.password.length < 5) {
              this.tipText = "密码不能小于5位！";
            } else if (this.config.password !== this.config.password2) {
              this.tipText = "两次密码不相同！";
            } else {
              this.tip = false;
              return true;
            }
            this.tip = true;
          } else if (this.step === 2) {
            if (this.config.dbType === "mysql") {
              if (this.config.dbUrl.length <= 0) {
                this.tipText = "数据库地址不能为空！";
              } else if (this.config.dbName.length <= 0) {
                this.tipText = "数据库帐号不能为空！";
              } else if (this.config.dbPass.length <= 0) {
                this.tipText = "数据库密码不能为空！";
              } else {
                this.tip = false;
                return true;
              }
              this.tip = true;
            } else if (this.config.dbType === "sqlite") {
              this.tip = false;
              return true;
            }
          }
          return false;
        }
      },
      watch: {
        tip: function (nv) {
          if (nv) {
            $('#alert').fadeIn();
          } else {
            $('#alert').hide();
            this.tip = false;
          }
        },
        step: function (nv) {
          if (nv === 3) {
            $.post('/config/init', this.config, function (data) {
              console.log(data);
              if (data.success) {
                vm.success = true;
                window.setTimeout(function (e) {
                  location.href = "/admin";
                }, 3000);
              }
            });
          }
        }
      }
    });

    $('input').focus(function (e) {
      $('#alert').fadeOut();
      vm.tip = false;
    });
  </script>
</body>
</html>
